<template>
   <div>
       <!-- <van-calendar title="日历" :poppable="false" :show-confirm="false" :style="{ height: '60%' }" /> -->
       <div class="kaoqing">
           <div class="box">
               <div class="topYear">
                   2021年
                   <span>
<!--                    <van-icon name="replay" size="18" @click="replay()" color="#111" />-->
                </span>
               </div>
               <div class="data">
                   <div class="dataitem">日</div>
                   <div class="dataitem">一</div>
                   <div class="dataitem">二</div>
                   <div class="dataitem">三</div>
                   <div class="dataitem">四</div>
                   <div class="dataitem">五</div>
                   <div class="dataitem">六</div>
               </div>
           </div>
           <div class="calendar">
               <div class="mounth">{{firstMonth.month}}月</div>
               <div class="dateCalendar">
                   <div v-if="firstMonth.emptySpace==1" class="day"></div>
                   <span v-if="firstMonth.emptySpace==2">
                    <div class="day" v-for="(it,index) in 2" :key="index"></div>
                </span>
                   <span v-if="firstMonth.emptySpace==3">
                    <div class="day" v-for="(it,index) in 3" :key="index"></div>
                </span>
                   <span v-if="firstMonth.emptySpace==4">
                    <div class="day" v-for="(it,index) in 4" :key="index"></div>
                </span>
                   <span v-if="firstMonth.emptySpace==5">
                    <div class="day" v-for="(it,index) in 5" :key="index"></div>
                </span>
                   <span v-if="firstMonth.emptySpace==6">
                    <div class="day" v-for="(it,index) in 6" :key="index"></div>
                </span>
                   <div class="day" v-for="(item,index) in first" :key="index">
                       <div>
                           {{item.attendanceDay}}
                       </div>
                       <div>
                           {{item.num}}
                       </div>
                   </div>
               </div>
               <div class="mounth">{{theSecondMonth.month}}月</div>
               <div class="dateCalendar">
                   <div v-if="theSecondMonth.emptySpace==1" class="day"></div>
                   <span v-if="theSecondMonth.emptySpace==2">
                    <div class="day" v-for="(it,index) in 2" :key="index"></div>
                </span>
                   <span v-if="theSecondMonth.emptySpace==3">
                    <div class="day" v-for="(it,index) in 3" :key="index"></div>
                </span>
                   <span v-if="theSecondMonth.emptySpace==4">
                    <div class="day" v-for="(it,index) in 4" :key="index"></div>
                </span>
                   <span v-if="theSecondMonth.emptySpace==5">
                    <div class="day" v-for="(it,index) in 5" :key="index"></div>
                </span>
                   <span v-if="theSecondMonth.emptySpace==6">
                    <div class="day" v-for="(it,index) in 6" :key="index"></div>
                </span>
                   <div class="day" v-for="(item,index) in two" :key="index">
                       <div>
                           {{item.attendanceDay}}
                       </div>

                   </div>
               </div>
               <br>
               <div class="mounth">{{theThirdMonth.month}}月</div>
               <div class="dateCalendar">
                   <div v-if="theThirdMonth.emptySpace===1" class="day"></div>
                   <span v-if="theThirdMonth.emptySpace===2">
                    <div class="day" v-for="(it,index) in 2" :key="index"></div>
                </span>
                   <span v-if="theThirdMonth.emptySpace===3">
                    <div class="day" v-for="(it,index) in 3" :key="index"></div>
                </span>
                   <span v-if="theThirdMonth.emptySpace===4">
                    <div class="day" v-for="(it,index) in 4" :key="index"></div>
                </span>
                   <span v-if="theThirdMonth.emptySpace===5">
                    <div class="day" v-for="(it,index) in 5" :key="index"></div>
                </span>
                   <span v-if="theThirdMonth.emptySpace===6">
                    <div class="day" v-for="(it,index) in 6" :key="index"></div>
                </span>
                   <div class="day" v-for="(item,index) in third" :key="index" style="color: red">
                       <div>
                           {{item.attendanceDay}}
                       </div>
                       <div>
                           {{item.absenceStatus}}
                       </div>
                       <div v-if="item.absenceTime!=null">
                           {{item.absenceTime}}小时
                       </div>

                   </div>
               </div>
           </div>
       </div>
   </div>

</template>

<script>
    import axios from "axios";
    export default {
        name: "record",
        data() {
            return {
                active: 1,
                //错误日期
                errDate: [],
                firstMonth: {
                    kqAbsenceDutyVos: []
                },
                theSecondMonth: {
                    kqAbsenceDutyVos: []
                },
                theThirdMonth: {
                    kqAbsenceDutyVos: []
                },
                //第一的
                first: [],
                //二
                two: [],
                //删
                third: [],

            }
        },
        mounted() {
            this.calendarReview()

        },
        methods: {
            replay() {
                this.calendarReview();
            },
            goindex() {
                // this.$router.push("/")
            },
            gorecird() {
                // this.$router.push("/record")
            },
            goLeavemanagement() {
                // this.$router.push("/Leavemanagement")
            },
            calendarReview: async function () {
                // 612362b404be8f34c712b2c8
                var toten = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InR5cGUiOiJ1c2VyIiwidXNlclBvb2xJZCI6IjYwMDY5NDRkOWM1YTUyZTczNWQzOTgzZCIsImFwcElkIjpudWxsLCJhcm4iOiJhcm46Y246YXV0aGluZzo2MDA2OTQ0ZDljNWE1MmU3MzVkMzk4M2Q6dXNlcjo2MTBiNjU2ODAzMTRjYjYxYzU0ZGRlOGQiLCJpZCI6IjYxMGI2NTY4MDMxNGNiNjFjNTRkZGU4ZCIsInVzZXJJZCI6IjYxMGI2NTY4MDMxNGNiNjFjNTRkZGU4ZCIsIl9pZCI6IjYxMGI2NTY4MDMxNGNiNjFjNTRkZGU4ZCIsInBob25lIjoiMTUyMTExMTIyMjIiLCJlbWFpbCI6IjE1MjExMTEyMjIyQDEyMy5jb20iLCJ1c2VybmFtZSI6InF4ayIsInVuaW9uaWQiOm51bGwsIm9wZW5pZCI6bnVsbCwiY2xpZW50SWQiOiI2MDA2OTQ0ZDljNWE1MmU3MzVkMzk4M2QifSwiaWF0IjoxNjMxMjQyNjIzLCJleHAiOjE2MzI1Mzg2MjN9.oVcmQx29UXMxCgcCwgB9rg8DljB8OlXz-Y_-QMee3R8"
                axios.get("http://localhost:38080/kq-rest/app/AppClockReplace/calendarReview", {params: {thirdId: "612362b404be8f34c712b2c8"}}, {headers: {token: toten}}).then(res => {
                    console.log(res.data)
                    if (res.data.code === 0) {
                        // console.log(res.data.data.firstMonth)
                        // console.log(res.data.data.theThirdMonth)
                        // console.log(res.data.data.theThirdMonth)
                        this.firstMonth = res.data.data.theSecondMonth;
                        this.theThirdMonth = res.data.data.theThirdMonth
                        this.theSecondMonth = res.data.data.theSecondMonth
                        this.firstkqAbsenceDutyVos = res.data.data.firstMonth.kqAbsenceDutyVos;
                        this.twokqAbsenceDutyVos = res.data.data.theSecondMonth.kqAbsenceDutyVos;
                        this.thirdkqAbsenceDutyVos = res.data.data.theThirdMonth.kqAbsenceDutyVos;
                        this.first = this.firstkqAbsenceDutyVos.reverse();
                        this.two = this.twokqAbsenceDutyVos.reverse();
                        this.third = this.thirdkqAbsenceDutyVos.reverse();
                        console.log("=============================")

                    }
                    // }
                }).catch(err => {
                        console.log(err)
                    }
                )
                // let res = await calendarReview(param);

            },

        }


    }
</script>

<style lang="scss" scoped>
    .box {
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        background: #fff;
    }

    .data {
        height: 60px;
        line-height: 60px;
        display: flex;
        text-align: center;
    }

    .dataitem {
        flex-grow: 1;
    }

    .index-main {
        position: absolute;
        width: 100%;
        height: 93%;
        background-color: #f5f5f5;
    }

    .kaoqing {
        width: 100%;
        position: relative;
        height: 85%;
    }

    .time {
        position: relative;
        text-align: center;
        margin-top: 10%;
    }

    .topTime {
        font-weight: 600;
        font-size: 129px;
    }

    .bottomTime {
        font-weight: 600;
        font-size: 40px;
    }

    .errPunch {
        position: absolute;
        width: 80%;
        height: 100px;
        left: 10%;
        bottom: 5%;

        .defend {
            color: red;
            display: inline-block;
            text-align: center;
            width: 100%;
        }
    }

    .punchClock {
        text-align: center;
        position: absolute;
        width: 100%;
        top: 30%;
    }

    .place {
        position: relative;
        text-align: center;
        top: 10%;
    }

    .van-button--primary {
        width: 90%;
        background-color: #2049a6;
        border-radius: 10px;
    }

    .calendar {
        font-size: 27px;
        position: absolute;
        width: 100%;
        padding-top: 160px;
        padding-bottom: 1.333rem;

        .mounth {
            height: 80px;
            line-height: 80px;
            text-align: center;
            position: relative;
            width: 100%;
            background-color: #cdcdcd;
        }

        .dateCalendar {
            background-color: white;

            .day {
                display: inline-block;
                width: 14.2%;
                height: 120px;
                // border: 1px solid;
                text-align: center;
                border-top: 7px solid #f5f5f5;
                vertical-align: top;
            }
        }
    }

    .kaoqing {
        width: 100%;
        position: relative;
        height: 85%;
    }

    .topYear {
        background-color: white;
        text-align: center;
        height: 100px;
        line-height: 100px;

        span {
            color: #1989fa;
            position: absolute;
            right: 3%;
        }
    }

    .maintain {
        color: #1989fa;
    }

    .queqing {
        color: red;
    }

</style>
